<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/passage-details.css">
    <title>首页</title>
</head>

<body>
    <!-- 首页 -->
    <div class="index">
        <div class="Left">
            <div class="header">
                <div class="logo"><img src="https://mdn.alipayobjects.com/huamei_0prmtq/afts/img/A*Ug-0S7mWpx8AAAAAAAAAAAAADvuFAQ/original" alt="语雀"></div>
                <div class="person">
                    <img src="images/微信图片_20230419223415.jpg" alt="" class="touxiang">
                    <div class="info">
                        <div class="person-nickname info-item" id="info-title"></div>
                        <div class="person-signature info-item">
                            <i id="info-title">个性签名：</i>
                            <span class="personalizedSignature"></span>
                        </div>
                        <div class="articles-collected info-item" id="info-title">收藏文章数: <span class="collectionSum">0</span></div>
                        <button class="info-item" id="change">修改个人资料</button>
                        <button class="info-item" id="exit">退出登录</button>
                    </div>
                </div>
            </div>
            <div class="tab-nav">
                <ul>
                    <li class="Active">
                        <a class="active" href="javascript:;" data-id="0">小记</a>
                    </li>
                    <li>
                        <a href="javascript:;" data-id="1">收藏</a>
                    </li>
                    <li>
                        <a href="javascript:;" data-id="2">逛逛</a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="Right">
            <div class="tab-content">
                <div class="item active" id="makeNode">
                    <div class="content">
                        <div class="left">
                            <h3>小记</h3>
                            <textarea name="node-content" id="node-content" cols="30" rows="50" autofocus="a" placeholder="记你想记"></textarea>
                            <button id="write">小记一下</button>
                        </div>
                        <div class="right">
                            <h3>小记栏</h3>
                            <ul class="node-list"></ul>
                        </div>
                    </div>
                </div>
                <div class="item" id="collected">
                    <ul class="collect-list"></ul>
                </div>
                <div class="item" id="browse">
                    <ul class="passage"></ul>
                </div>
            </div>
        </div>
    </div>
    <div class="curtain" style="display: none;">
        <div class="details">
            <header>
                <button id="Return">X</button>
                <div class="partName">文章详情</div>
            </header>
            <div class="body">
                <div class="left">
                    <div class="title"></div>
                    <div class="slide">
                        <div class="passage-part">
                        </div>
                        <div class="comment-part">
                            <h3>所有评论</h3>
                            <div class="center">
                                <ul class="comment-list"></ul>
                                <input type="text" id="comment" placeholder="在此处输入评论">
                                <button id="sent">提交</button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="right">
                    <button class="collect" id=""></button>
                </div>
            </div>
        </div>
    </div>


</body>
<script src="js/alert.js"></script>
<script>
    Toast('登录成功', 1000)

    //判断是否已创建个人信息
    var xhr = new XMLHttpRequest()
    xhr.open("GET", "http://localhost:8081/personalmsg", true)
        //设置请求头
    xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded")
    xhr.setRequestHeader("token", localStorage.getItem('token'))
    xhr.send()
    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4) {
            let info = JSON.parse(xhr.response)
            if (xhr.status >= 200 && xhr.status < 300) {
                //未创建个人信息
                if (!info.data.nickname) {
                    console.log('该用户还未创建个人信息');
                    const curtain = document.createElement('div')
                    curtain.id = 'curtain'
                    curtain.innerHTML = `
                         <div class="creat-info">
                        <h3>创建个人信息</h3>
                    <div class="creat-form" style="width: 60%;">
                        <input type="text" class="input-item " id="nickname" placeholder="昵称">
                        <input type="text" class="input-item" id="signature" placeholder="个性签名">
                        <button id="creat">确定</button>
                    </div>
                </div>  `
                    document.body.insertBefore(curtain, document.body.firstElementChild)
                    const creatInfo = document.querySelector('.creat-info')
                    creatInfo.addEventListener('click', function(e) {
                        if (e.target.tagName === 'INPUT') {
                            const old = document.querySelector('.creat-info .active')
                            if (old) {

                                old.classList.remove('active')
                            }
                            e.target.classList.add('active')
                        }
                    })
                    const creat = document.querySelector('#creat')
                    const nickname = document.querySelector('#nickname')
                    const signature = document.querySelector('#signature')
                    creat.addEventListener('click', function() {
                        document.querySelector('.creat-info .active').classList.remove('active')
                        var xhr = new XMLHttpRequest()
                            // 以POST方法发送请求，第二个参数为请求地址
                        xhr.open("POST", "http://localhost:8081/personalmsg", true)
                            // 设置请求头
                        xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded")
                            // 用'&’隔开参数
                        xhr.setRequestHeader("token", localStorage.getItem('token'))
                        xhr.send(`nickname=${nickname.value}&personalizedSignature=${signature.value}`)
                        xhr.onreadystatechange = function() {
                            if (xhr.readyState === 4) {
                                let info = JSON.parse(xhr.response)
                                if (xhr.status >= 200 && xhr.status < 300) {
                                    console.log(JSON.parse(xhr.responseText))
                                    if (info.data.message === "创建个人信息成功！") {
                                        Toast(info.data.message, 1000)
                                        curtain.remove()
                                    } else {
                                        Toast('创建失败', 2000)
                                    }
                                } else {
                                    console.log(JSON.parse(xhr.responseText))
                                }
                            }
                        }
                    });
                } else {
                    //已创建个人信息
                    console.log('该用户个人信息已创建');
                }
                console.log(JSON.parse(xhr.responseText))
            } else {
                console.log(JSON.parse(xhr.responseText))
            }
        }
    }

    //获取个人信息
    const personNickname = document.querySelector('.person-nickname')
    const personalizedSignature = document.querySelector('.personalizedSignature')
    const collectionSum = document.querySelector('.collectionSum')
        // 获取需要悬浮的对象
    let show = document.querySelector('.touxiang')
        // 获取被隐藏的菜单
    let menu = document.querySelector(".info");
    // 给show添加鼠标悬停事件
    show.onmouseover = function() {
        menu.style.display = "block";
        var xhr = new XMLHttpRequest()
            //以POST方法发送请求，第二个参数为请求地址
        xhr.open("GET", "http://localhost:8081/personalmsg", true)
            //设置请求头
        xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded")
            //用'&’隔开参数
        xhr.setRequestHeader("token", localStorage.getItem('token'))
        console.log(localStorage.getItem('token'));
        xhr.send()
        xhr.onreadystatechange = function() {
            if (xhr.readyState === 4) {
                let info = JSON.parse(xhr.response)
                if (xhr.status >= 200 && xhr.status < 300) {
                    personNickname.innerText = info.data.nickname
                    personalizedSignature.innerText = info.data.personalizedSignature
                    collectionSum.innerText = info.data.collectionSum
                    console.log(JSON.parse(xhr.responseText))
                } else {
                    console.log(JSON.parse(xhr.responseText))
                }
            }
        }
    }
    show.onmouseout = function() {
        // 获取菜单栏的坐标值
        let menux = menu.offsetLeft;
        let menuy = menu.offsetTop;
        let menuX = menu.offsetLeft + menu.offsetWidth;
        let menuY = menu.offsetTop + menu.offsetHeight;
        // 获取鼠标的坐标值
        let event = window.event;
        let mouseX = event.clientX;
        let mouseY = event.clientY;

        if (mouseX < menux || mouseX > menuX || mouseY < menuy || mouseY > menuY) {
            menu.style.display = "none";
        }
    }
    menu.onmouseover = function() {
        menu.style.display = "block";
    }
    menu.onmouseleave = function() {
        menu.style.display = "none";
    }

    //修改个人信息
    const change = document.getElementById('change')
    const index = document.querySelector('.index')
    change.addEventListener('click', function() {
            const changeFiled = document.createElement('div')
            changeFiled.classList.add('creat-info')
            changeFiled.innerHTML = ` <h3>修改个人信息</h3>
            <div class="creat-form" style="width: 60%;">
                <input type="text" class="input-item " id="nickname" value=${personNickname.innerText} placeholder=${personNickname.innerText}>
                <input type="text" class="input-item" id="signature" value=${personalizedSignature.innerText} placeholder=${personalizedSignature.innerText}>
                <button id="creat" class='changeInfo'>确定</button>
            </div>`
            index.append(changeFiled)
            const changeInfo = document.querySelector('.changeInfo')
            const nickname = document.querySelector('#nickname')
            const signature = document.querySelector('#signature')
            changeInfo.addEventListener('click', function() {
                var xhr = new XMLHttpRequest()
                xhr.open("PATCH", "http://localhost:8081/personalmsg", true)
                    // 设置请求头
                xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded")
                xhr.setRequestHeader("token", localStorage.getItem('token'))
                xhr.send(`nickname=${nickname.value}&personalizedSignature=${signature.value}`)
                xhr.onreadystatechange = function() {
                    if (xhr.readyState === 4) {
                        let info = JSON.parse(xhr.response)
                        if (xhr.status >= 200 && xhr.status < 300) {
                            console.log(JSON.parse(xhr.responseText))
                            if (info.data.message === "个人信息更新成功！") {
                                Toast(info.data.message, 1000)
                                changeFiled.remove()
                            } else {
                                Toast(info.message)
                            }
                        } else {
                            console.log(JSON.parse(xhr.responseText))
                        }
                    }
                }
            })
        })
        //退出登录
    const exit = document.querySelector('#exit')
    exit.addEventListener('click', function() {
        window.location = 'login.html'
    })

    //tab栏切换
    const tabNav = document.querySelector('.tab-nav ul')
    tabNav.addEventListener('click', function(e) {
        if (e.target.tagName === 'A') {
            document.querySelector('.tab-nav ul .active').classList.remove('active')
            e.target.classList.add('active')
            const i = +e.target.dataset.id
            document.querySelector('.tab-nav li.Active').classList.remove('Active')
            document.querySelector(`.tab-nav ul li:nth-child(${i+1})`).classList.add('Active')
            document.querySelector('.tab-content .active').classList.remove('active')
            document.querySelector(`.tab-content .item:nth-child(${i+1})`).classList.add('active')
        }
    })

    //登录时显示小记
    const nodeList = document.querySelector('.node-list')
    var XHR = new XMLHttpRequest()
    XHR.open("GET", "http://localhost:8081/mininotes", true)
        //设置请求头
    XHR.setRequestHeader("Content-type", "application/x-www-form-urlencoded")
        //用'&’隔开参数
    XHR.setRequestHeader("token", localStorage.getItem('token'))
    XHR.send()
    XHR.onreadystatechange = function() {
        if (XHR.readyState === 4) {
            let info = JSON.parse(XHR.response)
            if (XHR.status >= 200 && XHR.status < 300) {
                const data = info.data.data
                nodeList.innerHTML = data.map(item => {
                    const contents = item.content
                    const notesId = item.notesId
                    return `
                    <li id='${notesId}'>
                        <div class="word">${contents}</div>
                        <div class="button">
                            <button class="change-content" data-id='1'></button>
                            <button class="delete" data-id='2'></button>
                        </div>
                    </li>`
                }).join('')
                console.log(JSON.parse(XHR.responseText))
            } else {
                console.log(JSON.parse(XHR.responseText))
            }
        }
    }

    //创建发布小记
    const write = document.querySelector('#write')
    const content = document.querySelector('#node-content')
        //格式化时间函数
    function getMuDate() {
        const date = new Date()
        let mon = date.getMonth() + 1
        mon = mon < 10 ? '0' + mon : mon
        let day = date.getDate()
        day = day < 10 ? '0' + day : day
        let h = date.getHours()
        h = h < 10 ? '0' + h : h
        let m = date.getMinutes()
        m = m < 10 ? '0' + m : m
        return `${mon}-${day} ${h}:${m}`
    }
    //创建小记函数
    function creatnode() {
        if (!content.value.trim()) {
            content.value = ''
            return alert('小记内容不能为空')
        }
        const time = getMuDate()
        const timeId = +new Date()
        var xhr = new XMLHttpRequest()
        xhr.open("POST", "http://localhost:8081/mininotes", true)
            // 设置请求头
        xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded")
        xhr.setRequestHeader("token", localStorage.getItem('token'))
        xhr.send(`content=${content.value}&createTime=${time}&notesId=${timeId}&tag=`)
        xhr.onreadystatechange = function() {
            if (xhr.readyState === 4) {
                let info = JSON.parse(xhr.response)
                if (xhr.status >= 200 && xhr.status < 300) {
                    if (info.data.message === "新增小记成功！") {
                        Toast(info.data.message, 1000)
                        var XHR = new XMLHttpRequest()
                        XHR.open("GET", "http://localhost:8081/mininotes", true)
                            //设置请求头
                        XHR.setRequestHeader("Content-type", "application/x-www-form-urlencoded")
                        XHR.setRequestHeader("token", localStorage.getItem('token'))
                        XHR.send()
                        XHR.onreadystatechange = function() {
                            if (XHR.readyState === 4) {
                                let info = JSON.parse(XHR.response)
                                if (XHR.status >= 200 && XHR.status < 300) {
                                    const data = info.data.data
                                    const newNode = data.find(item => item.notesId === timeId)
                                    const li = document.createElement('li')
                                    li.id = `${timeId}`
                                    li.innerHTML =
                                        `<div class="word">${newNode.content}</div>
                                    <div class="button">
                                        <button class="change-content" data-id='1'></button>
                                        <button class="delete" data-id='2'></button>
                                    </div>`
                                    nodeList.appendChild(li)
                                    content.value = ''
                                    console.log(JSON.parse(XHR.responseText))
                                } else {
                                    console.log(JSON.parse(XHR.responseText))
                                }
                            }
                        }
                    } else {
                        console.log(info);
                    }
                } else {
                    console.log(JSON.parse(xhr.responseText))
                }
            }
        }
    }

    write.addEventListener('click', function() {
            creatnode()
        })
        // content.addEventListener('keyup', function(e) {
        //     if (e.key === 'Enter') creatnode()
        // })


    //修改/删除小记
    nodeList.addEventListener('click', function(e) {
        var XHR = new XMLHttpRequest()
        if (e.target.tagName === 'BUTTON') {
            if (e.target.dataset.id === '1') {
                const newContent = prompt('修改的小记', e.target.parentNode.previousElementSibling.innerText)
                if (!newContent) {
                    return alert('修改内容不能为空')
                }
                const time = getMuDate()
                if (newContent) {
                    XHR.open("PATCH", "http://localhost:8081/mininotes", true)
                    XHR.setRequestHeader("Content-type", "application/x-www-form-urlencoded")
                    XHR.setRequestHeader("token", localStorage.getItem('token'))
                    XHR.send(`content=${newContent}&createTime=${time}&notesId=${+e.target.parentNode.parentNode.id}&tag=`)
                    XHR.onreadystatechange = function() {
                        if (XHR.readyState === 4) {
                            let info = JSON.parse(XHR.response)
                            if (XHR.status >= 200 && XHR.status < 300) {
                                Toast(info.data, 1000)
                                e.target.parentNode.previousElementSibling.innerText = newContent
                                console.log(JSON.parse(XHR.responseText))
                            } else {
                                console.log(JSON.parse(XHR.responseText))
                            }
                        }
                    }
                }
            } else {
                if (confirm('是否确认删除该小记')) {
                    XHR.open("DELETE", `http://localhost:8081/mininotes/${+e.target.parentNode.parentNode.id}`, true)
                    XHR.setRequestHeader("Content-type", "application/x-www-form-urlencoded")
                    XHR.setRequestHeader("token", localStorage.getItem('token'))
                    XHR.send()
                    XHR.onreadystatechange = function() {
                        if (XHR.readyState === 4) {
                            let info = JSON.parse(XHR.response)
                            if (XHR.status >= 200 && XHR.status < 300) {
                                Toast(info.data, 1000)
                                nodeList.removeChild(e.target.parentNode.parentNode)
                                console.log(JSON.parse(XHR.responseText))
                            } else {
                                console.log(JSON.parse(XHR.responseText))
                            }
                        }
                    }
                }
            }
        }
    })


    //渲染文章函数
    let k = 0

    function render() {
        const passageList = document.querySelector('.passage')
        if (k == 2) {
            collectionList() //获取所有文章后渲染收藏列表
            return
        }
        var XHR = new XMLHttpRequest()
        XHR.open("GET", "http://localhost:8081/article/10", true)
            //设置请求头
        XHR.async = 'false'
        XHR.setRequestHeader("Content-type", "application/x-www-form-urlencoded")
        XHR.setRequestHeader("token", localStorage.getItem('token'))
        XHR.send()
        XHR.onreadystatechange = function() {
            if (XHR.readyState === 4) {
                let info = JSON.parse(XHR.response)
                if (XHR.status >= 200 && XHR.status < 300) {
                    const articles = info.data.articles
                    passageList.innerHTML += articles.map(item => {
                        const {
                            title,
                            content,
                            articleId,
                            imgUrl,
                            headImgUrl,
                            userName
                        } = item
                        return `<li id='${articleId}'>
                            <div class="left">
                                <div class="header">
                                    <img src="${headImgUrl}" alt="">
                                    <span class="username" style="color: black;">
                                        ${userName}
                                    </span>
                                </div>
                                <div class="title">${title}</div>
                                <div class="passage-content">${content}</div>
                            </div>
                            <di class="right">
                                    <img src="${imgUrl}" alt="">
                            </div>
                        </li>`
                    }).join('')
                    if (k == 1) {
                        const liList = document.querySelectorAll('.passage li')
                        for (let i = 0; i < liList.length; i++) {
                            liList[i].addEventListener('click', function() {
                                localStorage.setItem('articleId', this.id)
                                likeStatus()
                            })
                        }

                    }
                    k++
                    render()
                }
                console.log(JSON.parse(XHR.responseText))
            }
        }
    }
    render()
    var details = document.querySelector('.details')
    document.addEventListener('click', function(e) {
        const Curtain = document.querySelector('.curtain')
        if (e.target === Curtain) {
            animateOut(details, 1700)
                // document.querySelector('.curtain').style.display = 'none'
        }
    })
    const Return = document.querySelector('#Return')
    Return.addEventListener('click', function() {
        animateOut(details, 1700)
            // document.querySelector('.curtain').style.display = 'none'
    })

    function animateIn(obj, target) {
        console.log(obj.offsetLeft);
        var timer = setInterval(function() {
            if (obj.offsetLeft <= target + 20) {
                clearInterval(timer)
                console.log(obj.offsetLeft);
            }
            obj.style.left = obj.offsetLeft - 20 + 'px'
        }, 1)
    }

    function animateOut(obj, target) {
        clearInterval(obj.timer)
        obj.timer = setInterval(function() {
            if (obj.offsetLeft >= target - 20) {
                clearInterval(obj.timer)
                document.querySelector('.curtain').style.display = 'none'
            }
            obj.style.left = obj.offsetLeft + 20 + 'px'
        }, 1)
    }

    //渲染文章详情
    function renderDetails() {
        const articleId = localStorage.getItem('articleId')
        var XHR = new XMLHttpRequest()
        XHR.open("GET", `http://localhost:8081/article/search/${articleId}`, true)
            //设置请求头
        XHR.setRequestHeader("Content-type", "application/x-www-form-urlencoded")
        XHR.send()
        XHR.onreadystatechange = function() {
            if (XHR.readyState === 4) {
                let info = JSON.parse(XHR.response)
                if (XHR.status >= 200 && XHR.status < 300) {
                    const Article = info.data.Article
                    const {
                        title,
                        content,
                        time,
                        imgUrl,
                        userName
                    } = Article
                    document.querySelector('.passage-part').innerHTML = ` <img src="${imgUrl}" alt="">
                                            <div class="word">${content}</div>
                                            <div class="like">
                                                <button id="like"></button>
                                                <span class="likeNum"></span>
                                            </div>
                                            <div class="info">
                                                <span class="author">${userName}</span>
                                                <span class="Time">${time}</span>
                                                <span class="commentNum"></span>
                                            </div>`
                    document.querySelector('.details .body .left .title').innerText = `${title}`
                        // document.querySelector('.passage-part').classList.add(`${articleId}`)
                    console.log(JSON.parse(XHR.responseText))
                    console.log('获取该文章成功');
                    renderComment() //渲染评论
                    LikeQuantity() //渲染点赞人数
                    collectStatus() //渲染收藏状态
                    details.style.left = '1700px'
                    document.querySelector('.curtain').style.display = 'block'
                    animateIn(details, 640)
                    console.log(details.offsetLeft);
                    if (localStorage.getItem('status') === 'true') {
                        console.log('点了赞的');
                        document.querySelector('#like').classList.add('active')
                    }
                    document.getElementById('like').addEventListener('click', function() {
                        Like()
                    })
                } else {
                    console.log(JSON.parse(XHR.responseText))
                    console.log('获取该文章失败');
                }
            }
        }
    }

    const commentList = document.querySelector('.comment-list')
        //渲染评论函数
    function renderComment() {
        const articleId = localStorage.getItem('articleId')
        var XHR = new XMLHttpRequest()
        XHR.open("GET", `http://localhost:8081/comments/${articleId}`, true)
            //设置请求头
        XHR.setRequestHeader("Content-type", "application/x-www-form-urlencoded")
        XHR.send()
        XHR.onreadystatechange = function() {
            if (XHR.readyState === 4) {
                let info = JSON.parse(XHR.response)
                if (XHR.status >= 200 && XHR.status < 300) {
                    if (info.data.comments) {
                        const comments = info.data.comments
                        commentList.innerHTML = comments.map(item => {
                            const {
                                nickname,
                                headImgUrl,
                                content,
                                time,
                            } = item
                            return `<li>
                                    <img src="${headImgUrl}" alt="">
                                        <div class="right">
                                            <div class="Info">
                                                <span class="nickname">${nickname}</span>
                                                <span class="sent-time">${time}</span>
                                                <div class="content">${content}</div>
                                            </div>
                                        </div>
                                    </li>`
                        }).join('')
                        document.querySelector('.commentNum').innerText = `${comments.length}`
                        console.log(JSON.parse(XHR.responseText))
                        console.log('渲染评论成功');
                    }
                    // document.querySelector('.curtain').style.display = 'block'
                } else {
                    console.log(JSON.parse(XHR.responseText))
                }
            }
        }
    }

    const sent = document.querySelector('#sent')
    const input = document.querySelector('.details #comment')
    sent.addEventListener('click', function() {
        sentComment()
    })
    input.addEventListener('keyup', function(e) {
            //敲击击回车发布
            if (e.key === 'Enter') sentComment();
        })
        //创建发布评论
    function sentComment() {
        if (!input.value) {
            return alert('评论内容不能为空')
        }
        const Time = getMuDate()
        var xhr = new XMLHttpRequest()
            // 以POST方法发送请求，第二个参数为请求地址
        xhr.open("POST", "http://localhost:8081/comments", true)
            // 设置请求头
        xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded")
        xhr.setRequestHeader("token", localStorage.getItem('token'))
        xhr.send(`articleId=${localStorage.getItem('articleId')}&comments=${input.value}&time=${Time}`)
        xhr.onreadystatechange = function() {
            if (xhr.readyState === 4) {
                let info = JSON.parse(xhr.response)
                if (xhr.status >= 200 && xhr.status < 300) {
                    if (info.data === "评论成功!") {
                        Toast(info.data, 1000)
                        var XHR = new XMLHttpRequest()
                            //以POST方法发送请求，第二个参数为请求地址
                        XHR.open("GET", `http://localhost:8081/comments/${localStorage.getItem('articleId')}`, true)
                            //设置请求头
                        XHR.setRequestHeader("Content-type", "application/x-www-form-urlencoded")
                        XHR.send()
                        XHR.onreadystatechange = function() {
                            if (XHR.readyState === 4) {
                                let info = JSON.parse(XHR.response)
                                if (XHR.status >= 200 && XHR.status < 300) {
                                    const comments = info.data.comments
                                    const newComment = comments.find(item => (item.content === input.value && item.time === Time))
                                    const {
                                        nickname,
                                        headImgUrl,
                                        content,
                                        time,
                                    } = newComment
                                    const li = document.createElement('li')
                                    li.innerHTML =
                                        `
                                    <img src="${headImgUrl}" alt="">
                                        <div class="right">
                                            <div class="Info">
                                                <span class="nickname">${nickname}</span>
                                                <span class="sent-time">${Time}</span>
                                                <div class="content">${input.value}</div>
                                            </div>
                                        </div>
                                    `
                                    commentList.appendChild(li)
                                    document.querySelector('.commentNum').innerText = `${comments.length}`
                                    input.value = ''
                                    console.log(JSON.parse(XHR.responseText))
                                } else {
                                    console.log(JSON.parse(XHR.responseText))
                                }
                            }
                        }
                    } else {
                        console.log(info);
                    }
                } else {
                    console.log(JSON.parse(xhr.responseText))
                }
            }
        }
    }

    //获取文章点赞量
    function LikeQuantity() {
        const articleId = localStorage.getItem('articleId')
        var XHR = new XMLHttpRequest()
        XHR.open("GET", `http://localhost:8081/favour/${articleId}`, true)
            //设置请求头
        XHR.setRequestHeader("Content-type", "application/x-www-form-urlencoded")
        XHR.setRequestHeader("token", localStorage.getItem('token'))
        XHR.send()
        XHR.onreadystatechange = function() {
            if (XHR.readyState === 4) {
                let info = JSON.parse(XHR.response)
                if (XHR.status >= 200 && XHR.status < 300) {
                    const number = info.data.likeQuantity
                    document.querySelector('.likeNum').innerText = `${number}人点赞`
                    console.log('获取该文章点赞量成功');
                } else {
                    console.log(JSON.parse(XHR.responseText))
                    console.log('获取该文章点赞量失败');
                }
            }
        }
    }


    //点赞或取消点赞
    function Like() {
        const articleId = localStorage.getItem('articleId')
        var XHR = new XMLHttpRequest()
        console.log(localStorage.getItem('status') + 'if判断前');
        if (localStorage.getItem('status') === 'false') {
            XHR.open("POST", `http://localhost:8081/favour/${articleId}`, true)
            XHR.setRequestHeader("Content-type", "application/x-www-form-urlencoded")
            XHR.setRequestHeader("token", localStorage.getItem('token'))
            XHR.send()
            XHR.onreadystatechange = function() {
                if (XHR.readyState === 4) {
                    let info = JSON.parse(XHR.response)
                    if (XHR.status >= 200 && XHR.status < 300) {
                        const data = info.data
                        Toast(data, 1000)
                        LikeQuantity()
                        document.querySelector('#like').classList.add('active')
                        console.log('点赞成功');
                    } else {
                        console.log(JSON.parse(XHR.responseText))
                        console.log('点赞失败');
                    }
                }
            }
        } else {
            XHR.open("DELETE", `http://localhost:8081/favour/${articleId}`, true)
            XHR.setRequestHeader("Content-type", "application/x-www-form-urlencoded")
            XHR.setRequestHeader("token", localStorage.getItem('token'))
            XHR.send()
            XHR.onreadystatechange = function() {
                if (XHR.readyState === 4) {
                    let info = JSON.parse(XHR.response)
                    if (XHR.status >= 200 && XHR.status < 300) {
                        const data = info.data
                        Toast(data, 1000)
                        LikeQuantity()
                        document.querySelector('#like').classList.remove('active')
                        console.log('取消点赞成功');
                    } else {
                        console.log(JSON.parse(XHR.responseText))
                        console.log('取消点赞失败');
                    }
                }
            }
        }
        likeStatus() //仅获取点赞状态，不重新渲染页面
    }

    //获取个人点赞状态
    function likeStatus() {
        const articleId = localStorage.getItem('articleId')
        const curtain = document.querySelector('.curtain')
        console.log(curtain.style.display);
        var XHR = new XMLHttpRequest()
        XHR.open("GET", `http://localhost:8081/favour/mine/${articleId}`, true)
            //设置请求头
        XHR.setRequestHeader("Content-type", "application/x-www-form-urlencoded")
        XHR.setRequestHeader("token", localStorage.getItem('token'))
        XHR.send()
        XHR.onreadystatechange = function() {
            if (XHR.readyState === 4) {
                var info = JSON.parse(XHR.response)
                if (XHR.status >= 200 && XHR.status < 300) {
                    const status = info.data.status
                    console.log(status);
                    localStorage.setItem('status', status)
                    console.log(curtain.style.display);
                    if (curtain.style.display === 'none') {
                        renderDetails() //未渲染详情页，获取点赞状态后再渲染详情页
                    }
                    console.log(localStorage.getItem('status'));
                    console.log('获取个人点赞状态成功');
                    if (status) {
                        console.log('该用户已点赞')

                    } else console.log('该用户未点赞');

                } else {
                    console.log(JSON.parse(XHR.responseText))
                    console.log('获取个人点赞状态失败');
                }
            }

        }
    }

    const colletcBtn = document.querySelector('.body .right .collect')
    colletcBtn.addEventListener('click', function() {
        collectList = document.querySelector('.collect-list')
        const articleId = localStorage.getItem('articleId')
        var XHR = new XMLHttpRequest()
        if (colletcBtn.id === '') {
            XHR.open("POST", `http://localhost:8081/collection/${articleId}`, true)
            XHR.setRequestHeader("Content-type", "application/x-www-form-urlencoded")
            XHR.setRequestHeader("token", localStorage.getItem('token'))
            XHR.send()
            XHR.onreadystatechange = function() {
                if (XHR.readyState === 4) {
                    let info = JSON.parse(XHR.response)
                    if (XHR.status >= 200 && XHR.status < 300) {
                        const data = info.data
                        Toast(data, 1000)
                        colletcBtn.id = 'Collected'
                        console.log('添加收藏成功！');
                        const LI = document.createElement('li')
                        const li = document.getElementById(`${articleId}`)
                        LI.innerHTML = li.innerHTML
                        LI.classList.add(`${articleId}`)
                        collectList.append(LI)
                        LI.addEventListener('click', function() {
                            localStorage.setItem('articleId', this.className)
                            likeStatus()
                        })
                        collectList.append(LI)
                    } else {
                        console.log(JSON.parse(XHR.responseText))
                        console.log('添加收藏失败');
                    }
                }
            }
        } else if (colletcBtn.id === 'Collected') {
            XHR.open("DELETE", `http://localhost:8081/collection/${articleId}`, true)
            XHR.setRequestHeader("Content-type", "application/x-www-form-urlencoded")
            XHR.setRequestHeader("token", localStorage.getItem('token'))
            XHR.send()
            XHR.onreadystatechange = function() {
                if (XHR.readyState === 4) {
                    let info = JSON.parse(XHR.response)
                    if (XHR.status >= 200 && XHR.status < 300) {
                        const data = info.data
                        Toast(data, 1000)
                        colletcBtn.id = ''
                        console.log('取消收藏成功！');
                        var children = collectList.children
                        console.log(children);
                        for (let j = 0; j < children.length; j++) {
                            if (children[j].className === `${articleId}`) {
                                children[j].remove()
                                return
                            }
                        }
                    } else {
                        console.log(JSON.parse(XHR.responseText))
                        console.log('取消收藏失败');
                    }
                }
            }
        } else console.log('error');
    })

    //判断该文章收藏状态
    function collectStatus() {
        const articleId = localStorage.getItem('articleId')
        var XHR = new XMLHttpRequest()
        XHR.open("GET", `http://localhost:8081/collection`, true)
            //设置请求头
        XHR.setRequestHeader("Content-type", "application/x-www-form-urlencoded")
        XHR.setRequestHeader("token", localStorage.getItem('token'))
        XHR.send()
        XHR.onreadystatechange = function() {
            if (XHR.readyState === 4) {
                var info = JSON.parse(XHR.response)
                if (XHR.status >= 200 && XHR.status < 300) {
                    const collection = info.data.collections
                    console.log(articleId);
                    console.log(collection);
                    if (collection.includes(+articleId)) {
                        colletcBtn.id = 'Collected'
                        console.log('该文章已被收藏');
                    } else {
                        colletcBtn.id = ''
                        console.log('该文章未被收藏');
                    }
                } else {
                    console.log(JSON.parse(XHR.responseText))
                    console.log('获取收藏列表失败');
                }
            }

        }
    }

    //渲染收藏列表
    function collectionList() {
        collectList = document.querySelector('.collect-list')
        var XHR = new XMLHttpRequest()
        XHR.open("GET", `http://localhost:8081/collection`, true)
            //设置请求头
        XHR.setRequestHeader("Content-type", "application/x-www-form-urlencoded")
        XHR.setRequestHeader("token", localStorage.getItem('token'))
        XHR.send()
        XHR.onreadystatechange = function() {
            if (XHR.readyState === 4) {
                var info = JSON.parse(XHR.response)
                if (XHR.status >= 200 && XHR.status < 300) {
                    const collection = info.data.collections
                    for (let i = 0; i < collection.length; i++) {
                        const LI = document.createElement('li')
                        const li = document.getElementById(`${collection[i]}`)
                        LI.innerHTML = li.innerHTML
                        LI.classList.add(`${collection[i]}`)
                        collectList.append(LI)
                        LI.addEventListener('click', function() {
                            localStorage.setItem('articleId', this.className)
                            likeStatus()
                        })
                    }
                } else {
                    console.log(JSON.parse(XHR.responseText))
                    console.log('获取收藏列表失败');
                }
            }

        }
    }
</script>

</html>